<template>
  <div class="cloud">
    <el-container class="cloud-box">
      <div class="cloud-header">云文件</div>
      <div class="cloud-cont">
        <!-- 按钮 -->
        <div class="cloud-btnAll">
          <!-- 上传按钮 -->
          <el-button type="primary" @click="handleUpload">上传</el-button>

          <!-- 扫描按钮 -->
          <el-button type="success" @click="handleScan">扫描</el-button>

          <!-- 发送按钮 -->
          <el-button type="info" @click="handleSend">发送</el-button>

          <!-- 下载按钮 -->
          <el-button type="warning" @click="handleDownload">下载</el-button>

          <!-- 移动到按钮 -->
          <el-button type="danger" @click="handleMoveTo">移动到</el-button>

          <!-- 删除按钮 -->
          <el-button type="danger" @click="handleDeleteALl">删除</el-button>
          <!-- </div> -->
        </div>
        <!-- 内容 -->
        <el-table ref="multipleTable" :data="cities" tooltip-effect="dark" style="width: 100%"
          @current-change="handleCurrentChange" @selection-change="handleSelectionChange"
          :highlight-selection-row='true' height="796" class="cloud-table">

          <el-table-column type="selection" width="100" align="center"></el-table-column>

          <!-- 文件名称列，包含图标和文件名 -->
          <el-table-column label="文件名称" width="500">
            <template slot-scope="scope">
              <!-- 根据文件类型显示不同的图标 -->
              <span v-if="getFileTypeIcon(scope.row.textName)">
                <i :class="getFileTypeIcon(scope.row.textName)" style="margin-right: 10px;"></i>
              </span>
              {{ scope.row.textName }}
            </template>
          </el-table-column>

          <!-- 文件类型列 -->
          <el-table-column prop="name" label="文件类型" width="200" align="center"></el-table-column>

          <!-- 文件大小列 -->
          <el-table-column prop="size" label="文件大小" width="350" align="center">
            <template slot-scope="scope">{{ formatFileSize(scope.row.size) }}</template>
          </el-table-column>

          <!-- 修改时间列 -->
          <el-table-column label="修改时间" width="350" align="center">
            <template slot-scope="scope">{{ scope.row.time }}</template>
          </el-table-column>

          <el-table-column label="操作" width="250px" align="center">
            <template #default="scope">
              <!-- 修改按钮 -->
              <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)">
              </el-button>

              <!-- 删除按钮 -->
              <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-container>

  </div>
</template>

<script>
export default {
  name: 'cloudView',
  data () {
    return {
      // currentRow: null,
      selectedRows: [],// 存储选中的行
      // 城市数据（之前的 files）
      cities: [
        { name: '邹玉书', size: 1024, time: '2024-12-19 10:00:00', textName: '关于11月份安保工作会议通知.pdf' },
        { name: '林坚诚', size: 2048, time: '2024-12-18 11:30:00', textName: '关于07月份安保工作会议通知.pdf' },
        { name: '姜宇航', size: 512, time: '2024-12-17 12:15:00', textName: '关于06月份安保工作会议通知.jpg' },
        { name: '段安易', size: 4096, time: '2024-12-16 13:00:00', textName: '关于01月份安保工作会议通知.mkv' },
      ],
    }
  }, methods: {
    // 处理行选择变化
    handleSelectionChange (val) {
      this.selectedRows = val; // val 是当前选中的行数据
    },
    // 当前行变化
    handleCurrentChange (row) {
    // 使用 toggleRowSelection 来切换选中状态
    this.$refs.multipleTable.toggleRowSelection(row);
    },
    handleEdit (row) {
      console.log("修改", row);
      // 这里可以根据实际情况进行修改操作
    },
    handleDelete (row) {
      console.log("删除", row);
      // 这里可以根据实际情况进行删除操作
    },
    // 判断文件类型图标
    getFileTypeIcon (fileName) {
      const extension = fileName.split('.').pop().toLowerCase(); // 获取文件扩展名

      if (['pdf', 'doc', 'docx', 'txt', 'ppt', 'xls', 'xlsx'].includes(extension)) {
        return 'el-icon-document';  // 文档图标
      } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'].includes(extension)) {
        return 'el-icon-picture';  // 图片图标
      } else if (['mp3', 'wav', 'aac', 'flac'].includes(extension)) {
        return 'el-icon-headset';  // 音频图标
      } else if (['mp4', 'avi', 'mkv', 'mov', 'flv'].includes(extension)) {
        return 'el-icon-video-camera';  // 视频图标
      } else if (['zip', 'rar', 'tar', '7z'].includes(extension)) {
        return 'el-icon-package';  // 压缩包图标
      } else {
        return '';  // 默认无图标
      }
    },

    // 格式化文件大小（字节转换为 KB/MB/GB）
    formatFileSize (size) {
      if (size < 1024) return size + ' B';
      else if (size < 1024 * 1024) return (size / 1024).toFixed(2) + ' KB';
      else if (size < 1024 * 1024 * 1024) return (size / (1024 * 1024)).toFixed(2) + ' MB';
      else return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
    }
    ,
    handleUpload () {
      console.log('上传按钮点击');
    },
    handleScan () {
      console.log('扫描按钮点击');
    },
    handleSend () {
      console.log('发送按钮点击');
    },
    handleDownload () {
      console.log('下载按钮点击');
    },
    handleMoveTo () {
      console.log('移动到按钮点击');
    },
    handleDeleteALl () {
      console.log('删除按钮点击');
    },

    // handleSelectionChange (val) {
    //   this.multipleSelection = val;
    // }
    // ,


  },

}
</script>

<style lang="scss" scoped>
::v-deep thead .el-table__cell {
  text-align: center !important;
}

::v-deep .el-container {
  overflow: hidden;
  /* 防止父容器显示默认滚动条 */
}

.cloud-list-items {
  flex: 1;
  // background: #F8F8F8;
  // margin: 0 3px;
}

.checked-item {
  background-color: #f7fdb19c;
  /* 选中后的背景颜色 */
  // border: 1px solid #67C23A;  /* 可选的边框颜色 */
  color: #fff;
  /* 文字颜色 */
}

.checked-item {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.checked-item .checkbox-content .file-name,
.checked-item .checkbox-content .file-size,
.checked-item .checkbox-content .file-time {
  color: #333;
  /* 文字颜色，确保选中后文字也改变 */
}

.cloud {
  width: 100%;
}

.cloud-box {
  display: flex;
  flex-direction: column;

  .cloud-header {
    padding: 3px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    background-color: white;
    border-bottom: 1px #ddd solid;
  }

  .friend-detail {
    display: flex;
    padding: 50px 80px 20px 80px;
    text-align: center;


    .info-item {
      margin-left: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      border: 1px #ddd solid;
    }

    .description {
      padding: 20px 20px 0px 20px;
    }
  }

  .frient-btn-group {
    text-align: left !important;
    padding: 20px;
  }
}

.cloud-cont {
  // display: flex;
  // flex-direction: column;
  // padding-left: 20px;
  overflow: hidden;

  .cloud-btnAll {
    display: flex;
    padding: 20px;
    align-items: center;
    border-bottom: 1px #ddd solid;

    .el-button {
      margin: 0 20px;
      padding: 8px 30px !important;
    }

    // 

  }

  .cloud-table {
    .el-button {
      padding: 8px 8px !important;
    }
  }

  ::v-deep .el-checkbox {
    padding-left: 20px;
  }

  .cloud-checkbox {
    display: flex;
    flex-direction: column;

    img {
      width: 25px;
      height: 25px;
      margin: 0 100px;
    }

    ::v-deep .el-checkbox {
      display: flex;
      border-bottom: 1px #ddd solid;
      margin-right: 0;
    }

    .checkbox-content {
      display: flex;
      align-items: center;
      text-align: center;

      .file-name {
        margin: 0 50px;
        width: 100px;
        font-weight: bold;
      }

      .file-size {
        margin-left: 10px;
        width: 400px;
        color: #888;
      }

      .file-time {
        margin-left: 10px;
        color: #888;
      }

      .el-icon-document {
        font-size: 18px;
        color: #1890ff;
      }
    }

    ::v-deep .el-checkbox__label {
      display: flex;
      width: 100% !important;
      height: 70px;
    }

  }
}
</style>